import React, { Component } from 'react'
import { ActivityIndicator, View } from 'react-native'
import Video from 'react-native-video'
import { Colors, Metrics } from '../Themes'

export default class VideoFullScreen extends Component {
    constructor(props) {
        super(props)
        this.state = {
            loadFinished: false,
        }
    }
    render() {
        return (
            <View style={{ justifyContent: 'center', alignItems: 'center', backgroundColor: 'black' }}>
                <Video source={this.props.route.params.source}
                    style={{ width: Metrics.screenWidth, height: Metrics.screenHeight - Metrics.navBarHeight }}
                    paused={false}
                    controls={true}
                    repeat={true}
                    resizeMode='contain'
                    onLoad={(payload) => {
                        console.log('onLoad')
                        console.log(payload)
                        this.setState({ loadFinished: true })
                    }}
                />
                {this.state.loadFinished ? null : <ActivityIndicator size="large" color={Colors.mainColor} style={{ position: 'absolute' }} />}
            </View>
        )
    }
}